<template>
	<view class="uni-calendar-item__weeks-box" :class="{
		'uni-calendar-item--disable': weeks.disable || !formatWeekObj.usable,
		'uni-calendar-item--before-checked-x':weeks.beforeMultiple,
		'uni-calendar-item--multiple': weeks.multiple,
		'uni-calendar-item--after-checked-x':weeks.afterMultiple,
		}" @click="choiceDate(formatWeekObj)" @mouseenter="handleMousemove(weeks)">
		<view class="uni-calendar-item__weeks-box-item" :class="{
				'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && (calendar.userChecked || !checkHover),
				'uni-calendar-item--checked-range-text': checkHover,
				'uni-calendar-item--before-checked':weeks.beforeMultiple,
				'uni-calendar-item--multiple': weeks.multiple,
				'uni-calendar-item--after-checked':weeks.afterMultiple,
				'uni-calendar-item--disable':weeks.disable || !formatWeekObj.usable,
				}">
			<!-- <text v-if="selected && weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text> -->
			<text class="uni-calendar-item__weeks-box-text uni-calendar-item__weeks-box-text-disable uni-calendar-item--checked-text">{{weeks.date}}</text>
			<text v-if="formatWeekObj.hasPoint" class="point" :class="{'disable-point': weeks.disable || !formatWeekObj.usable}"></text>
		</view>
		<!-- <view :class="{'uni-calendar-item--today': weeks.isToday}"></view> -->
	</view>
</template>

<script>
	export default {
		props: {
			times: { // 可考试的日期集合
				type: Array,
				default: []
			},
			useType: { // 日期使用类型 1 口语 2 机试 3 笔试
				type: Number,
				default: 1
			},
			hasOkBtn: {
				type: Boolean,
				default: true
			},
			weeks: {
				type: Object,
				default () {
					return {}
				}
			},
			calendar: {
				type: Object,
				default: () => {
					return {}
				}
			},
			selected: {
				type: Array,
				default: () => {
					return []
				}
			},
			checkHover: {
				type: Boolean, 
				default: false
			}
		},
		computed: {
			formatWeekObj(){
				const date = new Date(this.weeks.fullDate)
				const year = date.getFullYear()
				const month = date.getMonth()
				const day = date.getDate()
				const weekDay = date.getDay()
				let week = {...this.weeks}
				switch (this.useType) {
					// case 1: // 搜索 没有圆点，今天之后的不可点
					// 	week = {
					// 		...week,
					// 		usable: this.noFutureDate(year, month, day)
					// 	}
					// 	break;
					case 1:
					case 2: // 口语，机试，每天可考，今天之后的不可点
						week = {
							...week,
							usable: this.noFutureDate(year, month, day),
							hasPoint: true
						}
						break;
					case 3: // 笔试，指定日期可考 ，今天之后的不可点
						week = {
							...week,
							usable: this.noFutureDate(year, month, day),
							hasPoint: this.times.some(item => this.isSameDay(date, new Date(item)))
						}
						break;
				}
				return week
			}
		},
		methods: {
			// 是否同一天
			isSameDay(date1, date2) {
				return (
					date1.getFullYear() === date2.getFullYear() &&
					date1.getMonth() === date2.getMonth() &&
					date1.getDate() === date2.getDate()
				)
			},
			// 是否是今天之后的日期
			noFutureDate(year, month, day) {
				const currentDate = new Date();
				const futureDate = new Date(year, month, day);
				return futureDate < currentDate;
			},
			choiceDate(weeks) {
				if(!weeks.usable) return
				if(!weeks.hasPoint){
					return this.$emit('disabled')
				}
				this.$emit('change', weeks)
				if(!this.hasOkBtn){
					this.$emit('confirm')
				}
			},
			handleMousemove(weeks) {
				this.$emit('handleMouse', weeks)
			}
		}
	}
</script>

<style lang="scss" >
	$uni-primary: #007aff !default;

	.uni-calendar-item__weeks-box {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 1px 0;
		position: relative;
	}

	.uni-calendar-item__weeks-box-text {
		font-size: 14px;
		// font-family: Lato-Bold, Lato;
		font-weight: bold;
		color: darken($color: $uni-primary, $amount: 40%);
	}

	.uni-calendar-item__weeks-box-item {
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 35px;
		height: 35px;
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
	}


	.uni-calendar-item__weeks-box-circle {
		position: absolute;
		top: 5px;
		right: 5px;
		width: 8px;
		height: 8px;
		border-radius: 8px;
		background-color: #dd524d;

	}
	.point {
		position: absolute;
		bottom: 3px;
		left: 50%;
		transform: translate(-50%,0);
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background-color: #fd453d;

	}
	.disable-point{
		background-color: rgba(253, 69, 61, .3);
	}

	.uni-calendar-item__weeks-box .uni-calendar-item--disable {
		cursor: default;
	}

	.uni-calendar-item--disable .uni-calendar-item__weeks-box-text-disable {
		color: #D1D1D1;
	}

	.uni-calendar-item--today {
		position: absolute;
		top: 10px;
		right: 17%;
		background-color: #dd524d;
		width:6px;
		height: 6px;
		border-radius: 50%;
	}

	.uni-calendar-item--extra {
		color: #dd524d;
		opacity: 0.8;
	}

	// .uni-calendar-item__weeks-box .uni-calendar-item--checked {
	// 	background-color: $uni-primary;
	// 	border-radius: 50%;
	// 	box-sizing: border-box;
	// 	// border: 3px solid #fff;
	// }

	// .uni-calendar-item--checked .uni-calendar-item--checked-text {
	// 	color: #fff;
	// }

	.uni-calendar-item--multiple .uni-calendar-item--checked-range-text {
		color: #333;
	}

	.uni-calendar-item--multiple {
		background-color:  #F6F7FC;
		// color: #fff;
	}

	.uni-calendar-item--multiple .uni-calendar-item--before-checked,
	.uni-calendar-item--multiple .uni-calendar-item--after-checked {
		background-color: $uni-primary;
		border-radius: 50%;
		box-sizing: border-box;
		border: 3px solid #F6F7FC;
	}

	.uni-calendar-item--before-checked .uni-calendar-item--checked-text,
	.uni-calendar-item--after-checked .uni-calendar-item--checked-text {
		color: #fff;
	}

	.uni-calendar-item--before-checked-x {
		border-top-left-radius: 50px;
		border-bottom-left-radius: 50px;
		box-sizing: border-box;
		background-color: #F6F7FC;
	}

	.uni-calendar-item--after-checked-x {
		border-top-right-radius: 50px;
		border-bottom-right-radius: 50px;
		background-color: #F6F7FC;
	}
</style>
